<template>
    <el-row>

        <el-input class="center" style="width: 400px;"   placeholder="请输入学号" /><br>
        <el-input class="center" style="width: 400px;"   placeholder="请输入姓名" />
        <el-input class="center" style="width: 400px;"   placeholder="请输入年龄" />
        <el-button class="center" width="50px"  type="primary">清空输入框</el-button>
        <el-button class="center" width="50px" type="primary">添加</el-button>
    </el-row>



    <el-table class="center" ref='multipleTableRef' :data="tableData" style="width: 50%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="学号" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger"
                    @click="handleDelete(scope.$index, scope.row); open()">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
const open = () => {
    ElMessageBox.confirm(
        '请确定是否继续?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('取消删除')
        })
}



const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    console.log('val', val);
    multipleSelection.value = val

}

const handleEdit = (index, row) => {
    console.log(index, row)
}
const handleDelete = (index, row) => {
    console.log(index, row)
}





const tableData = [
    {
        id: '03',
        name: '🐂',
        age: '18',
    },
    {
        id: '02',
        name: '🐎',
        age: '19',
    },
    {
        id: '04',
        name: '🐅',
        age: '20',
    },
    {
        id: '01',
        name: '🐉',
        age: '21',
    },
    {
        id: '01',
        name: '🐍',
        age: '21',
    },
    {
        id: '01',
        name: '🐀',
        age: '21',
    },
    {
        id: '01',
        name: '🐇',
        age: '21',
    },
    {
        id: '01',
        name: '🐏',
        age: '21',
    },
    {
        id: '01',
        name: '🐒',
        age: '21',
    },
    {
        id: '01',
        name: '🐓',
        age: '21',
    },
    {
        id: '01',
        name: '🐕',
        age: '21',
    },
    {
        id: '01',
        name: '🐖',
        age: '21',
    },
]
</script>


<style>
.center {
    margin: auto
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}</style>